<template>
  <view class="container">
    <uni-nav-bar
      :border="false"
      statusBar
      title="巡检明细"
      color="#000"
      left-icon="left"
      backgroundColor="transparent"
      @clickLeft="onBack"
    >
    </uni-nav-bar>

    <uni-table
      ref="table"
      :loading="loading"
      border
      emptyText="暂无数据"
      style="margin-bottom: 30rpx"
    >
      <!-- 表头行 -->
      <uni-tr>
        <uni-th width="100">操作</uni-th>
        <uni-th>巡检部分</uni-th>
        <uni-th>巡检结果</uni-th>
        <uni-th>巡检时间</uni-th>
        <uni-th>存在问题</uni-th>
        <uni-th>巡检人</uni-th>
        <uni-th>巡检是否结束</uni-th>
        <uni-th>描述</uni-th>
      </uni-tr>
      <!-- 表格数据行 -->
      <uni-tr v-for="(item, i) in tableData" :key="i">
        <uni-td>
          <!-- <button type="warn" size="mini" v-if="item.isFinish == 0" @click="onFinish(item)">巡检</button> -->
          <!-- <uni-badge :text="item.fileLists.length" absolute="rightTop" size="normal"> -->
          <button type="primary" size="mini" @click="onFile(item)">附件</button>
          <!-- </uni-badge> -->
        </uni-td>
        <uni-td>{{ item.patrolPart }}</uni-td>
        <uni-td>{{ item.patrolResult }}</uni-td>
        <uni-td>{{ item.patrolTime }}</uni-td>
        <uni-td>{{ item.existProblem }}</uni-td>
        <uni-td>{{ item.patrolUserIds && item.patrolUserIds.join() }}</uni-td>
        <uni-td>{{ item.isFinish == 0 ? '否' : '是' }}</uni-td>
        <uni-td>{{ item.described }}</uni-td>
      </uni-tr>
    </uni-table>
    <view class="uni-pagination-box">
      <uni-pagination
        show-icon
        :total="total"
        :current="params.pageNum"
        :page-size="params.pageSize"
        @change="onChangePage"
      />
    </view>

    <uni-popup ref="popup">
      <FormView :data="data" @callback="onCallback" />
    </uni-popup>

    <uni-popup ref="filePopup">
      <view class="fileBox">
        <!-- <FileUploader
          file-mediatype="image"
          v-model="data.oss"
          @del="onFileDel"
        /> -->
        <!-- <button class="btn" type="primary" @click="onFileSubmit">提交</button> -->
        <view class="fujian-box">
          <img v-for="(v, i) in data.oss" :key="i" :src="v.url" :alt="v.name" />
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {
  editPatrolRecordDetail,
  getPatrolRecordDetailList,
  delPatrolRecordDetailAttachment,
  editPatrolRecordDetailAttachment,
  getPatrolRecordDetailAttachmentList,
} from '@/api/patrol';
import FormView from './formDetail.vue';
import useAppStore from '@/store/modules/app';
import FileUploader from '@/components/FileUploader/index.vue';
export default {
  components: {
    FormView,
    FileUploader,
  },
  data() {
    return {
      data: {},
      query: {},
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      tableData: [],
      // store
      appStore: useAppStore(),
    };
  },
  onLoad(query) {
    this.query = query;
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      getPatrolRecordDetailList({
        ...this.params,
        patrolRecordId: this.query.patrolRecordId,
      }).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    // 分页
    onChangePage(e) {
      this.params.pageNum = e.current;
      this.getData();
    },
    // 附件
    onFile(d) {
      this.data = d;
      //   if (!d.oss) {
      getPatrolRecordDetailAttachmentList({
        pageNum: 1,
        pageSize: 100,
        patrolRecordDetailId: d.patrolRecordDetailId,
      }).then((o) => {
        this.data.oss = o.rows.map((k) => {
          return {
            url: k.ossUrl,
            name: k.ossOriginalName,
            extname: '',
            ossId: k.ossId,
            patrolRecordDetailId: k.patrolRecordDetailId,
            patrolRecordDetailAttachmentId: k.patrolRecordDetailAttachmentId,
          };
        });
        if (this.data.oss.length) {
          this.$refs.filePopup.open('bottom');
        } else {
          uni.showToast({
            title: `无附件`,
            icon: 'none',
          });
        }
      });
    },
    onFileDel(e) {
      let id = e.tempFile.patrolRecordDetailAttachmentId;
      if (!id) return;
      // loading提示
      uni.showLoading({ title: '删除中' });
      delPatrolRecordDetailAttachment(id).then((item) => {
        uni.hideLoading();
        uni.showToast({
          title: `删除成功`,
        });
      });
    },
    onFileSubmit() {
      console.log(this.data.oss);
      let f = this.data.oss
        .filter((item) => !item.patrolRecordDetailId)
        .map((item) => item.ossId)
        .join();
      if (!f) {
        this.$refs.filePopup.close();
        return;
      }
      // 批量上传
      editPatrolRecordDetailAttachment({
        ossIdArrStr: f,
        patrolRecordDetailId: this.data.patrolRecordDetailId,
      }).then((res) => {
        uni.showToast({
          title: `操作成功`,
        });
        this.$refs.filePopup.close();
      });
    },
    // 结束
    onFinish(d) {
      this.data = d;
      let content = '是否确认结束？';
      uni.showModal({
        title: '提示',
        content: content,
        success: (res) => {
          if (res.confirm) {
            this.$refs.popup.open('bottom');
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        },
      });
    },
    onCallback(r) {
      // loading提示
      uni.showLoading({ title: '提交中' });
      let params = {
        ...this.data,
        ...r,
      };
      editPatrolRecordDetail(params).then((res) => {
        uni.hideLoading();
        uni.showToast({
          title: `操作成功`,
        });
        // 刷新详情
        this.getData();
        this.$refs.popup.close();
      });
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(180deg, #d7e4fd 0%, #fff 50%);
  position: relative;
  :deep(.uni-badge) {
    z-index: 99;
  }
  .fileBox {
    padding: 60rpx 48rpx 100rpx;
    border-radius: 40rpx 40rpx 0 0;
    background: #fff;
    overflow: hidden;
    .btn {
      margin-top: 100rpx;
    }
  }
  fujian-box {
    display: flex;
    flex-direction: column;
    img {
      display: inline-block;
      width: 100rpx;
      height: 100rpx;
    }
  }
}
</style>
